<template>
	<div class="box1">
		<el-table :data="tableData" style="width: 100%" max-height="550">
			<el-table-column fixed prop="date" label="日期" width="150">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="120">
			</el-table-column>
			<el-table-column prop="province" label="部门" width="120">
			</el-table-column>
			<el-table-column prop="city" label="工作时间" width="120">
			</el-table-column>
			<el-table-column prop="address" label="工作内容" width="300">
			</el-table-column>
			<el-table-column prop="zip" label="备注" width="120">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="120">
				<template slot-scope="scope">
					<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
						移除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- <el-button type="primary" class="cheng">添加日程</el-button> -->
		<el-button type="text" @click="open">添加日程 Message Box</el-button>
	</div>
</template>

<script>
	export default {
		name: 'Richeng',
		methods: {
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			open() {
				this.$alert('这是一段内容', '标题名称', {
					confirmButtonText: '确定',
					callback: action => {
						this.$message({
							type: 'info',
							message: `action: ${ action }`
						});
					}
				});
			}
		},

		data() {
			return {
				tableData: [{
						date: '2016-05-03',
						name: '刘德华',
						province: '教育部',
						city: '24:00',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					}, {
						date: '2016-05-02',
						name: '周星驰',
						province: '教育部',
						city: '06:34',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					}, {
						date: '2016-05-04',
						name: '吴京',
						province: '教育部',
						city: '09:09',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					}, {
						date: '2016-05-01',
						name: '黄渤',
						province: '人事部',
						city: '01:34',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					}, {
						date: '2016-05-08',
						name: '黄晓明',
						province: '人事部',
						city: '12:22',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					}, {
						date: '2016-05-06',
						name: '王宝强',
						province: '人事部',
						city: '09:22',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
					{
						date: '2016-05-07',
						name: '徐峥',
						province: '人事部',
						city: '10:30',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					},
				]
			}
		}
	}
</script>

<style>
	.box1 {
		position: relative;
		margin-bottom: 80px;
	}

	.cheng {
		position: absolute;
		margin-top: 10px;
		right: 50px;

	}

	.el-button--primary {
		width: 100px;
	}
</style>
